<template>
    <div class="severress">
      <van-nav-bar title="新增收货地址" left-arrow
                   @click-left="onClickLeft">
        <template #right>
          <van-icon name="search" size="22" color="#6A6A6A"/>
        </template>
      </van-nav-bar>
           <van-form @submit="onSubmit">
             <van-field
               v-model="obj.name"
               name="name"
               label="名字"
               placeholder="真实名字"
               :rules="[{ required: true, message: '请填写真实名字' }]"
             />
             <van-field
               v-model="obj.phone"
               name="phone"
               label="手机号码"
               placeholder="手机号码"
               maxlength="11"
               :rules="[{ required: true, message: '请填写手机号码' }]"
             />
             <van-field
               v-model="obj.address_region"
               name="address_region"
               label="所在地址"
               placeholder="省 市 区 街道信息"
               :rules="[{ required: true, message: '请填写省市区街道信息' }]"
             />
             <van-field
               v-model="obj.address_info"
               name="address_info"
               label="详细地址"
               placeholder="详细地址"
               :rules="[{ required: true, message: '请填写详细地址' }]"
             />
             <van-field name="checkbox" label="设置为默认地址">
               <template #input>
                 <van-checkbox v-model="checkbox" shape="square" />
               </template>
             </van-field>
             <van-button type="primary" size="large" color="#FF6700" native-type="onSubmit" >保存地址</van-button>
           </van-form>
    </div>
</template>

<script>
import Vue from 'vue'
import { Form, Field, Toast } from 'vant'

import { address } from '../../../../api/index'

Vue.use(Toast)
Vue.use(Form)
Vue.use(Field)
export default {
  name: 'Saveress',
  data () {
    return {
      arrs: [],

      obj: {
        name: '',
        phone: '',
        address_region: '',
        address_info: ''
      },
      checkbox: false,
      value: ''
    }
  },
  methods: {
    onSubmit (values) {
      this.arrs = JSON.parse(localStorage.getItem('arr'))
      this.arrs.push(this.obj)
      Toast.success('保存成功')
      localStorage.setItem('arr', JSON.stringify(this.arrs))
      this.obj = {
        name: '',
        phone: '',
        address_region: '',
        address_info: ''
      }
      this.checkbox = false
      console.log(this.arrs)
      this.$router.push('/address')
    },
    onClickLeft () {
      this.$router.back()
    },
    async data () {
      var res = await address()
      this.arrs = res.data
    }
  },
  onConfirm (values) {
    this.value = values
      .filter((item) => !!item)
      .map((item) => item.name)
      .join('/')
    this.showArea = false
  }

}
</script>

<style scoped lang="less">
  .severress{
    width: 100%;
    height: 100vh;
    position: absolute;
    background: #ffff;
    z-index: 1000;
  }
  /deep/.van-nav-bar .van-icon{
    color: #6A6A6A;

  }
  /deep/.van-nav-bar{
    background-color: #F2F2F2;
  }
  /deep/.van-button--large{
    position: fixed;
    bottom:0;
    left: 0;
  }
  /deep/.van-button--round{
    border-radius: 0;
  }
  /deep/.van-address-edit__buttons .van-button{
    margin-bottom: 0;
  }
  /deep/.van-cell{
    padding: 10px 28px;
  }
  /deep/.van-field__label{
    width: 2rem;
  }
</style>
